<template>
  <div>
    <dog v-for="(item,index) in list" :key="index"
    :pic="item.dogImgUrl"
    :name="item.dogName"
    @like="likeFn"
    />
    <p>显示喜欢的狗:</p>
    <ul>
      <li v-for="(item,index) in like" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
// 引入组件
import Dog from './components/Dog03.vue'
export default {
  // 局部注册
  components:{
    Dog
  },
  data(){
    return {
      list:[
    {
        dogImgUrl: "https://img2.baidu.com/it/u=2168830847,3729631324&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=71fd043c89a9b1d02541e9aa8beb84df",
        dogName: "博美",
    },
    {
        dogImgUrl:"https://img2.baidu.com/it/u=2580464508,2938353992&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
        dogName: "泰迪",
    },
    {
        dogImgUrl:"https://img0.baidu.com/it/u=2235128871,3246360790&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        dogName: "金毛",
    },
    {
        dogImgUrl:"https://img0.baidu.com/it/u=1908543079,2156650337&fm=253&fmt=auto&app=138&f=PNG?w=440&h=314",
        dogName: "哈士奇",
    },
    {
        dogImgUrl:"https://img1.baidu.com/it/u=2114920940,3207926542&fm=253&fmt=auto&app=138&f=JPG?w=416&h=421",
        dogName: "阿拉斯加",
    },
    {
        dogImgUrl:"https://img2.baidu.com/it/u=2173130960,302544920&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400",
        dogName: "萨摩耶",
    },
],
      like:[]
    }
  },
  methods:{
    likeFn(dogName){
      this.like.push(dogName);
    }
  }
}
</script>

<style>
  li {
    list-style: none;
  }
</style>